<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Message,
  Search
} from '@element-plus/icons-vue'

</script>

<template>
  <div class="common-layout">
    <el-container class="outer-box">
      <el-header>Header</el-header>
      <el-container class="content-box">
        <el-aside width="200px">
          <el-scrollbar>
            <!-- el-menu是菜单容器 -->
            <el-menu :default-openeds="['1', '3']" :router="true">
              <!-- el-sub-menu:是子菜单容器，即：如果有子菜单，那么先使用 el-sub-menu进行包裹-->
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <message />
                  </el-icon>轮播图管理
                </template>
                <!-- el-menu-item:这就是某个菜单项。路由跳转就在此处写 -->
                <el-menu-item index="/Banner">轮播图列表</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <message />
                  </el-icon>产品管理
                </template>
                <el-menu-item index="/Pro">产品列表</el-menu-item>
                <el-menu-item index="/SecondsKill">秒杀列表</el-menu-item>
                <el-menu-item index="/Recommend">推荐列表</el-menu-item>
                <el-menu-item index="/Search">
                  <el-icon><search/></el-icon>
                  筛选列表
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
  /* border:1px solid black; */
}

.outer-box {

  width: 100%;
  height: 100%;
}

.el-header {
  width: 100%;
  height: 120px;
  background-color: skyblue;
}

.el-aside {
  width: 200px;
  background-color: #ededed;
}

.el-main {
  background-color: gray;
}
</style>
